<template>
  <div class="hello ">
  	<div class="clearfix">
  		<p class="tjgd">&nbsp;&nbsp;&nbsp;推荐歌单</p>
     		<div class="tjkuai" v-for="(r,i) in privileges" :key="i">
     			<div class="tjtu">
     				<img :src="r.picUrl" @click="togedan(r.id)"/>
     			</div>
     			<span class="tjwz">{{r.name}}</span>
     		</div>
  	</div>
     
     <p class="tjgd">&nbsp;&nbsp;&nbsp;最新音乐</p>
     <div class="zxyy" v-for="(r,i) in newmu" :key="i" @click="tobf(r.id)">
     		<p>{{r.name}}</p>
     		<span v-for="(s,i) in r.song.artists" :key="i">{{s.name}}</span>--<span>{{r.song.album.name}}</span>
     		<div class="icon">
     			  <i class="iconfont icon-bofang"></i>
     		</div>
     </div>
  </div>
</template>

<script>
	import axios from "axios";
export default {
  data(){
  	return{
  		privileges:[],
  		newmu:[]
  	}
  },
  
		   mounted(){
   	 var that = this;
   	 axios.get("http://netease.bluej.cn/personalized?timestamp=444",{
					params:{
						idx:0
					}
				}).then(function(res){
					console.log(res);
					for(var i=0;i<6;i++){
						that.privileges.push(res.data.result[i]);
					}
				}), 
   	 	axios.get("http://netease.bluej.cn/personalized/newsong?timestamp=333",{
					params:{
						idx:0
					}
				}).then(function(res){
					console.log(res.data.result);
						that.newmu=res.data.result;
				})
   },
   methods:{
   togedan(gedanId){
      this.$router.push( { path:"/gedan",query:{gedanid : gedanId} } );
   	},
   	tobf(bfId){
      this.$router.push( { path:"/bofang",query:{bfid : bfId} } );
   		}
   }
}
</script>

<style scoped>
 		.tjgd{
 			width: 100%;
 			height: 15vw;
 			line-height:15vw ;
 			font-size: 17px;		
 		}
 		.tjgd::before{
 			content:"";
 			border-left:2px solid red;
 			clear:both;
 		}
 		/*.tjgd::after{
 			content:"jjj";		
 			clear:both;
 		}*/
 		.zxyy{
 				padding: 10px 5px;
				border-bottom: 1px solid #EEEFF0;
 			}
 			.icon{
					display: inline-block;
					position: absolute;
					right: 20px;
					margin-top: -15px;
				}
				.icon-bofang{
						font-size: 25px;
						opacity:0.4;
					}
 		.tjkuai{
 			width: 31%;
 			height: 40vw;
 			float: left;
 			margin: 1%;
 		}
 		.tjtu{
 				width: 100%;
 				height: 30vw;
 			}
 			img{
 					width: 100%;
 					height: 100%;
 				}
 				.tjwz{
 					width: 100%;
 					height: 7.6vw;
 					font-size: 12px;
 				}
</style>
